<template>
  <div>
    <h1>功能展示</h1>
    <div class="result">
      <!-- <el-input
        type="textarea"
        :rows="10"
        placeholder="点击下方按钮进行结果展示"
        v-model="textarea"
        disabled
        resize="none"
      >
      </el-input> -->
      <div class="resList-wrap">
        <div v-for="item in resList" class="resList" :key="item">
          {{ item }}
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="mainImpl">主程序-子程序</el-button>
        <el-button type="primary" @click="objectImpl">面向对象</el-button>
        <el-button type="primary" @click="incidentImpl">事件系统</el-button>
        <el-button type="primary" @click="pipeImpl">管道-过滤器</el-button>
      </div>
    </div>
    <div class="whole" ref="whole">
      <h1>整体功能介绍</h1>
      <img src="./img/whole.png" alt="">
      <p>整体功能介绍：用户点击上方按钮可以分别使用"主程序-子程序"，"面向对象"，"事件系统"，"管道-过滤器"，四种方法实现对文本的循环移位，并且按照字母表顺序排序,结果将显示在上面的结果展示框中。功能的实现则是采用前后分离的方法，前端通过调用后端接口来进行数据通讯</p>
    </div>

    <div class="main" ref="main">
      <h1>主程序-子程序原理展示</h1>
      <img src="./img/main.png" alt="">
      <p>分为四个功能，输入、移位、排序、输出，controller主模块按顺序调用四个模块，通过共享数据进行每个不同模块之间的数据交换</p>
    </div>

    <div class="object" ref="object">
      <h1>面向对象原理展示</h1>
      <img src="./img/object.png" alt="">
      <p>数据被封装成object的形式，每个object都提供了接口，通过构造函数的形式，进行数据传递。比如：input对象中提供了一个返回lineTxt的一个方法，通过这个方法可以将数据返回到主模块中，然后再将读入的数据传递给shift对象，该对象也提供了接口，以便于接收数据。</p>
    </div>

    <div class="incident" ref="incident">
      <h1>事件系统原理展示</h1>
      <img src="./img/incident.png" alt="">
      <p>
        将input、shift、Alphabetizer 、output每个都实现Obsever来作为观察者，通过KWICSubject来创建主题，并且把观察者加入主题中，再逐一调用即可
      </p>
    </div>

    <div class="pipe" ref="pipe">
      <h1>管道-过滤器原理展示</h1>
      <img src="./img/pipe.png" alt="">
      <p>
        在该体系结构中，每个组件都有一组输入和输出，组件读入输入流，经过数据处理，产生输出流。本次实验中，由于要返回数据给前端展示，则在controller层中单独写了一个读数据的操作，将处理好的数据读出来放入列表返回。
      </p>
    </div>
  </div>
</template>

<script>
import { reqMain, reqObject,reqIncident,reqPipe } from "../api/index";
export default {
  name: "Home",
  data() {
    return {
      resList: ["点击下方按钮执行程序"],
    };
  },
  methods: {
    async mainImpl() {
      this.$refs.main.style.display = 'block'
      this.$refs.object.style.display = 'none'
      this.$refs.pipe.style.display = 'none'
      this.$refs.incident.style.display = 'none'
      this.$refs.whole.style.display = 'none'
      const result = await reqMain();
      if (result.code == 1) {
        this.$message.success("主程序-子程序执行成功");
        this.resList = result.data;
      } else {
        this.$message.error("执行失败");
      }
    },
    async objectImpl() {
      this.$refs.main.style.display = 'none'
      this.$refs.object.style.display = 'block'
      this.$refs.pipe.style.display = 'none'
      this.$refs.incident.style.display = 'none'
      this.$refs.whole.style.display = 'none'
      const result = await reqObject();
      if (result.code == 1) {
        this.$message.success("面向对象执行成功");
        this.resList = result.data;
      } else {
        this.$message.error("执行失败");
      }
    },
    async incidentImpl() {
      this.$refs.main.style.display = 'none'
      this.$refs.object.style.display = 'none'
      this.$refs.pipe.style.display = 'none'
      this.$refs.incident.style.display = 'block'
      this.$refs.whole.style.display = 'none'
      const result = await reqIncident()
      if(result.code==1){
        this.$message.success("事件系统执行成功");
        this.resList = result.data;
      }else{
        this.$message.error("执行失败")
      }
    },
    async pipeImpl() {
      this.$refs.main.style.display = 'none'
      this.$refs.object.style.display = 'none'
      this.$refs.pipe.style.display = 'block'
      this.$refs.incident.style.display = 'none'
      this.$refs.whole.style.display = 'none'
      const result = await reqPipe()
      if(result.code==1){
        this.$message.success("管道-过滤器执行成功");
        this.resList = result.data;
      }else{
        this.$message.error("执行失败")
      }
    },
  },
};
</script>

<style lang="less" scoped>
.result {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
}
h1 {
  text-align: center;
}
.btn {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.resList {
  text-align: center;
}
.resList-wrap{
  min-height: 250px;
  background-color: #F5F7FA;
  border-radius: 5px;
  border: 1px solid #E4E7ED;
}
.whole{
  display: block;
    img{
    margin-left: 50%;
    transform: translateX(-50%);
  }
  p{
    width: 800px;
    // text-align: center;
    margin-left: 50%;
    font-size: 22px;
    text-indent: 2em;
    transform: translateX(-50%);
    line-height: 50px;
  }
}
.main,.object,.incident,.pipe{
  display: none;
  transition: all .3s ease;
  img{
    margin-left: 50%;
    transform: translateX(-50%);
  }
  p{
    width: 800px;
    // text-align: center;
    margin-left: 50%;
    font-size: 22px;
    text-indent: 2em;
    transform: translateX(-50%);
    line-height: 50px;
  }
}
</style>